<template>
	<view>
		<search-slot>
			<template #left>
				<view class="search-left text-center">

				</view>
			</template>
			<template #center>
				<view class="flex-1 search-center text-center">购物车</view>
			</template>
			<template #right>
				<view class="search-right text-center change-pos" @click="changeEdit">
					<text class="" v-if="isEdit">编辑</text>
					<text class="" v-else>完成</text>
				</view>
			</template>
		</search-slot>
		<template v-if="store.isListShow">
			<view class="py-5 d-flex a-center j-center bg-white">
				<view class="iconfont icon-gouwuche text-light-muted" style="font-size: 50rpx;"></view>
				<text class="text-light-muted mx-2">购物车还是为空</text>
				<view class="px-2 py-1 border border-light-secondary rounded" hover-class="bg-light-secondary">
					去逛逛
				</view>
			</view>
		</template>
		<template v-else>
			<view class="d-flex a-center py-3 border-bottom border-light-secondary" v-for="(item,index) in store.list"
				:key="index">
				<label class="radio d-flex a-center j-center flex-shrink" style="width: 80rpx;height: 80rpx;"
					@click="store.selectItem(index)">
					<radio color="#FD6801" :checked="item.checked" />
				</label>
				<image :src="item.cover" mode="widthFix" style="height: 150rpx;width: 150rpx;"
					class="border border-light-secondary rounded p-2 flex-shrink">
				</image>
				<view class="flex-1 d-flex flex-column pl-2">
					<view class="text-dark" style="font-size: 35rpx;">
						{{item.title}}
					</view>
					<view class="d-flex text-light-muted mb-1">
						<text class="my-1">
							{{item.skusText}}
						</text>
					</view>
					<view class="mt-auto d-flex j-sb">
						<text slot="newprice" style="color: #f60;">￥{{item.pprice}}</text>
						<view class="a-self-end">
							<uni-number-box :min="0" :max="9" v-model="item.num"></uni-number-box>
						</view>
					</view>
				</view>

			</view>
			<view class="py-5"></view>
		</template>
		<template v-if="isEdit">
			<view
				class="d-flex a-center position-fixed left-0 right-0 bottom-0 ju border-top border-light-secondary a-stretch"
				style="height: 100rpx;z-index: 100;">
				<label class="radio d-flex a-center j-center flex-shrink" style="width: 120rpx;" @click="doSelected">
					<radio color="#FD6801" :checked="store.checkedAll" :disabled="store.isListShow"></radio>
				</label>
				<view class="flex-1 d-flex a-center j-center font-md" style="background:#fff;">
					合计:
					<text slot="newprice" style="color: #f60;font-weight: 900;">{{store.totalPrice}}</text>
				</view>
				<view class="flex-1 d-flex a-center j-center main-bg-color text-white font-md"
					hover-class="main-bg-hover-color">
					结算
				</view>
			</view>
		</template>
		<template v-else>
			<view
				class="d-flex a-center position-fixed left-0 right-0 bottom-0 ju border-top border-light-secondary a-stretch"
				style="height: 100rpx;z-index: 100;">
				<label class="radio d-flex a-center j-center flex-shrink" style="width: 120rpx;" @click="doSelected">
					<radio color="#FD6801" :checked="store.checkedAll" :disabled="store.isListShow"></radio>
				</label>
				<view class="flex-1 d-flex a-center j-center font-md main-bg-color text-white">
					移入收藏
				</view>
				<view class="flex-1 d-flex a-center j-center bg-danger text-white font-md"
					hover-class="main-bg-hover-color" @click="store.delSelect()">
					删除
				</view>
			</view>
		</template>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		toRefs,
		onMounted
	} from 'vue'
	import {
		useCartStore
	} from '../../store/cart.js'
	import {
		onShow
	} from '@dcloudio/uni-app'
	import $U from '../../utils/unLogin.js'
	const store = useCartStore()
	var isListShow = ref(false)
	var isEdit = ref(true)
	const changeEdit = () => {
		isEdit.value = !isEdit.value
	}
	const doSelected = () => {
		store.doSelect()
	}
	// onMounted(()=>{
	// 	store.getCartList()
	// 	uni.$on('update',()=>{
	// 		store.getCartList()
	// 	})
	// })
	onShow(() => {
		let token = uni.getStorageSync('token') || ''
		if (token) {
			store.getCartList()
		} else {
          $U.unLogin()
		}

	})
</script>
<style scoped lang="scss">
	.change-pos {
		position: absolute;
		right: 20rpx;
		top: 24rpx;
	}
</style>